<template>
  <el-container class="main-container">
    <el-header>
      <home-header @headImgClick="handleHeadImgClick"></home-header>
    </el-header>
    <el-container class="main-content-container">
      <transition name="collapse">
      <el-aside class="main-el-sider" :style="'width:' + this.currentWidth + 'px'">
        <home-sider @select="handleSelect" :isCollapse="isCollapse"></home-sider>
      </el-aside>
      </transition>
      <el-container>
        <el-main>
          <home-content></home-content>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import HomeHeader from "@/pages/home/Header";
import HomeSider from "@/pages/home/Sider";
import HomeContent from '@/pages/home/Content'
export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeSider,
    HomeContent
  },
  data() {
    return {
      isCollapse: false,
      currentWidth: 265
    };
  },
  methods: {
    handleSelect(indexPath) {
      console.log(indexPath);
    },
    handleHeadImgClick() {
      this.isCollapse = !this.isCollapse
    }
  },
  watch: {
    isCollapse(newVal) {
      if (newVal) {
        this.currentWidth = 50
      } else {
        this.currentWidth = 300
      }
    }
  }
};
</script>
<style scoped>
.main-el-sider {
  /* width: 15%; */
  overflow: visible;
  /* background-color: black; */
  background-color: #f1f3f4;
  height: 100%;
  transition: width .5s;
}
body {
  background: #333;
}
.main-content-container {
  margin-top: 3px;
  overflow-y: hidden;
  height: 100%;
  overflow-x: hidden;
}
.main-content-container /deep/ .el-submenu__title {
  line-height: 35px;
  height: 35px;
  font-family: "Hiragino Sans GB";
  font-size: 0.9rem;
  color: #6a6a6a;
}
/* 调整滑动条样式 */
/* .main-content-container .el-aside::-webkit-scrollbar {
  width: 8px;
}
.main-content-container .el-aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.main-content-container .el-aside::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
} */
.main-content-container /deep/ .el-menu-item {
  height: 35px;
  line-height: 35px;
  /* font-size: 12px; */
  font-family: "Hiragino Sans GB";
}
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 10px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

/* .el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow-x: hidden;
} */

.el-main {
  background-color: #f1f3f4;
  color: #333;
  text-align: center;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
}
.main-container {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: #f1f1f1;
  top: 0;
  left: 0;
}
</style>
